<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- vue框架： 视图的双向绑定 -->
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<!--  axios: 进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="js/axios.js"></script>
		<link rel="stylesheet" href="css/nav.css">
		<link rel="stylesheet" href="css/orders.css">
		<link rel="stylesheet" href="css/search.css">
		<style type="text/css">
			.content>#app>thead>tr>th{
				
				padding: 0px 50px;
			}
			tbody>tr>td{
				padding: 0px 50px;
			}
			#app{
				margin-left: 30px;
				border: 1px solid;
				border-radius: 10px;
			}
			.content{
				height:900px;
			}
			
		</style>
	</head>
	<body>
		<div class="all">
			<div id="container">
				<header>
					<div class="logo" id="h">
						<a href="index.html">
							<img src="images/nav/logo.png" alt="">
						</a>
					</div>
					<nav>
						<strong>
							<ul>
								<li>
									<a href="index.html">首页</a>
								</li>
								<li>
									<a href="#">今日推荐⇩</a>
									<ol>
										<li>
											<div class="jrtj">
												<img src="images/nav/jrtj.jpg" alt="">
											</div>
										</li>
									</ol>
								</li>
								<li>
									<a href="login.html">请登录</a>
								</li>
								<li>
									<a href="register.html">免费注册</a>
								</li>
								<li>
									<a href="orders.html">我的商品</a>
								</li>
								<li>
									<a href="users.html">我的账户</a>
								</li>
								<li>
									<a href="#">更多⇩</a>
									<ol>
										<li>
											<a href="">联系我们</a>
										</li>
									</ol>
								</li>
							</ul>
						</strong>
		       		</nav>
		    	</header>
				
				<div class="content" >
				<div style="margin-left: 30px;"><h1>所有订单</h1></div>
				<table id="app">
					<thead>
						<tr>
							<th>订单编号</th>
							<th>订单名称</th>
							<th>地址</th>
							<th>订单时间</th>
							<th>原价</th>
							<th>现在价格</th>
							<th>数量</th>
							<th>结束订单的时间</th>
							<th>是否支付</th>
							<th>备注</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="o in order">
							<td>{{o.id}}</td>
							<td>{{o.name}}</td>
							<td>{{o.oaddress}}</td>
							<td>{{o.createtime}}</td>
							<td>{{o.ooldprice}}</td>
							<td>{{o.onowprice}}</td>
							<td>{{o.count}}</td>
							<td>{{o.endtime}}</td>
							<td>{{o.oflag}}</td>
							<td>{{o.oremark}}</td>
							<td>
								<a :href="'order_modifications.html?id='+o.id">修改</a>
								<a href="javascript:void(0);"  v-on:click="delOrder(o.id)">删除</a>
							</td>
						</tr>
					</tbody>
				</table>
	<script type="text/javascript">
		let vue = new Vue({
			el: '#app',
			data:{
				order: []
			},
			created(){
				//url: 表示异步请求地址
				axios.get('/managerSystem/selectorder.do').then(
					function(res_obj){
						//使用获取的数据来给vue对象中的users数据赋值
						vue.order = res_obj.data; 
					}
				).catch(
					function(error_obj){
						alert("网络加载异常！！");
					}
				)
			},
			methods:{
				delUser: function(id){
					console.log(id);
					//url: 表示异步请求地址
					axios.get('/managerSystem/deleteOrder.do?id=' + id).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							//vue.order = res_obj.data; 
							window.location.href="orders.html";
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				}
			}
		});
	</script>
				</div>
				<footer>
					<div class="footer1">
						<img src="images/nav/logo.png" alt="">
					</div>
					<a href="#h"><span>⇧返回顶部</span></a>
					<div class="footer3">
						<a href=""><img src="images/nav/f1.png" alt=""></a>
						<a href=""><img src="images/nav/f2.png" alt=""></a>
						<a href=""><img src="images/nav/f3.png" alt=""></a>
						<a href=""><img src="images/nav/f4.png" alt=""></a>
					</div>
					<div class="footer2">
						<a href="">
						<h4></h4>
						</a>
					</div>
				</footer>
			</div>
		</div>
	</body>
</html>